import * as THREE from "three";
//导入轨道
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
//导入动画库
import gsap from "gsap";
//导入dat.gui
import * as dat from "dat.gui"

//掌握gsap 设置各种动画效果

//Clock 跟踪时间对象


//使用控制器去查看3D物体

// console.log(THREE);

//控制3D物体的移动


//1.创建场景
const scene=new THREE.Scene()

//2.创建相机
//透视相机
//                                       角度
const camera=new THREE.PerspectiveCamera(90,window.innerHeight/window.innerHeight,
0.1,
1000
)
//设置相机位置参数
camera.position.set(0,0,10);

//添加相机到场景当中
scene.add(camera);

//添加物体
//创建几何体
const cubeGeometry=new THREE.BoxGeometry();
//自定义顶点矩形
const vertices=new Float32Array([
    -1.0,-1.0,1.0,
     1.0,-1.0,1.0,
     1.0, 1.0,1.0,

    //  1.0, 1.0,1.0,
    // -1.0, 1.0,1.0,
    // -1.0,-1.0,1.0
])

cubeGeometry.setAttribute("position",new THREE.BufferAttribute(vertices,3))

// 设置材质
const CubeMeterial=new THREE.MeshBasicMaterial({
    color:0xffff00
}) 
//重新创建物体
const mesh=new THREE.Mesh(cubeGeometry,CubeMeterial);
console.log(mesh);
scene.add(mesh);

//根据集合体和材质去创建物体
const cube=new THREE.Mesh(cubeGeometry,CubeMeterial)

//缩放
cube.scale.set(1,1,1)


//模拟坐标
const axesHelper=new THREE.AxesHelper(5)

// 将几何体添加到场景当中
// scene.add(cube);
//添加坐标轴
scene.add(axesHelper);

//初始化渲染器
const renderer=new THREE.WebGL1Renderer();
//设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerWidth);

console.log(cube);
//将渲染的内容添加到画布上
document.body.appendChild(renderer.domElement);

//使用渲染器，通过相机将场景渲染进来
// renderer.render(scene,camera);

//创建轨道控制器
const controls=new OrbitControls(camera,renderer.domElement);
//设置轨道控制器的阻尼,必须要在动画循环里面调用update()
controls.enableDamping=true;

//设置时钟
const clock=new THREE.Clock();

//设置动画
// var amimate1 =  gsap.to(cube.position,{x:5,duration:5,ease:'power1.inOut',
// //设置循环的次数 -1 无限循环
// repeat:2,
// //往返运动
// yoyo:true,
// //延迟两秒运动
// delay:2,
// onComplete: ()=> {
// console.log("动画完成");
// },onStart: ()=> {
//     console.log("动画开始");
// }});
gsap.to(cube.rotation,{x:2*Math.PI,duration:5});

window.addEventListener("dblclick",()=>{
   
    if(amimate1.isActive()){

        amimate1.pause();

    }else{

        amimate1.resume();

    }
});


window.addEventListener("dblclick",()=>{
    const fullscreen=document.fullscreenElement;
    if(!fullscreen){
        renderer.domElement.requestFullscreen();
    }else{
        document.exitFullscreen();
    }
    //双击控制屏幕进入全屏,退出全屏
    
});

function render(time){
    controls.update();
    renderer.render(scene,camera);
    requestAnimationFrame(render);
}

render();

//监听画面变化,更新渲染画面
window.addEventListener("resize",()=>{
    console.log("画面变化了");
    //更新摄像机
    camera.aspect=window.innerWidth/window.innerHeight;
    //更新摄像机投影矩阵
    camera.updateProjectionMatrix(); 
    //更新渲染器的像素比
    renderer.setSize(window.innerWidth,window.innerHeight);
})

const gui= new dat.GUI();
gui.add(cube.position,"x").min(0).max(5).step(0.1).name("移动x").onChange((value)=>{

}).onFinishChange((value)=>{

});
//修改物体的颜色
const params={
    color:"#ffff00",
    fn:()=>{
        //让动画运动起来
        gsap.to(cube.position,{x:5,duration:2,yoyo:true,repeat:-1}); 
    }
}
gui.addColor(params,"color").onChange((value)=>{
  console.log("值被修改",value);
  cube.material.color.set(value);
});
//设置选项框
gui.add(cube,'visible').name("是否显示")
//点击触发某个事件
gui.add(params,"fn").name("立方体运动");
//添加文件夹
var folder= gui.addFolder("设置立方体");
folder.add(cube.material,"wireframe"); 
